<template>
	<view class="detail">
		<view class="title">{{detailInfo.title}}</view>
		<view class="header">
			<view class="author">作者: {{detailInfo.author}}</view>
			<view class="time">发布时间: {{detailInfo.posttime}}</view>
		</view>
		<view class="content">
			<rich-text :nodes="detailInfo.content"></rich-text>
		</view>
		<view class="footer">
			<text></text>
		</view>
	</view>
</template>

<script>
	import {parseTime} from 'utils/timeTool'
	export default {
		data() {
			return {
				reqData:Object,
				detailInfo:Object,
				// 设置历史的对象
				new_history:Object,
			};
		},
		onLoad(e){
			this.reqData=e;
			uni.showLoading({ title: '加载中...' });
			this.getDetailedInfo();
			// console.log(this.detaildInfo);
		},
		onReady(){

		},
		methods:{
			getDetailedInfo(){
				uni.request({
					url:'https://tea.qingnian8.com/api/qingnews/detail',
					data:this.reqData,
					header:{
						"access-key":"123abc321"
					},
					success:res=>{
						this.detailInfo=res.data.data;
						// console.log(this.detailInfo.content);
						this.new_history={classid:this.detailInfo.classid,
										  id:this.detailInfo.id,
										  picurl:this.detailInfo.picurl,
										  title:this.detailInfo.title,
										  browsingTime:parseTime(new Date())}
						this.saveHistory(this.new_history);
						//如何解决获取到的数组中的对象中content属性，图片过大的问题
						this.detailInfo.content=this.detailInfo.content.replace(/<img/gi,'<img style="max-width:100%"');
						// 把发布日期转化为年月日格式
						this.detailInfo.posttime=parseTime(this.detailInfo.posttime,'{y}年{m}月{d}日');
						// console.log(this.detailInfo.content);
						// 设置导航栏标题
						uni.setNavigationBarTitle({
							title:`${this.detailInfo.title}`,
						})
						uni.hideLoading();
					}
				})
			},
			saveHistory(new_history_obj){
				// 根据id进行去重操作
				let news_history_list=uni.getStorageSync('news_history') || [];
				news_history_list=news_history_list.filter((e)=>e.id!==new_history_obj.id);
				news_history_list.unshift(new_history_obj);
				news_history_list.slice(0,10);
				// console.log(news_history_list);
				uni.setStorageSync('news_history',news_history_list);
			}
		}
	}
</script>

<style lang="scss" scoped>
.detail{
	padding:30rpx;
	.title{
		font-size: 46rpx;
		color:#333;
	}
	.header{
		background: #F6F6F6;
		padding:20rpx;
		font-size: 25rpx;
		color:#666;
		display: flex;
		justify-content: space-between;
		margin:40rpx 0;
	}
	.content{
		padding-bottom:50rpx;		
		 overflow-wrap: anywhere;
		img{
		 	max-width: 100%;
		}
	}
	.footer{
		background: #FEF0F0;
		font-size: 26rpx;
		padding:20rpx;
		color:#F89898;
		line-height: 1.8em;
	}
}
</style>
